<template>
  <div class="monitor">
    <el-form ref="searchForm" :inline="true" class="demo-form-inline">
      <el-form-item label="归属处室" prop="orgName" class="leftMargiin">
        <el-input clearable v-model="orgName" class="inline-input" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="当前处理人" prop="handlePerson" class="leftMargiin">
        <el-input clearable v-model="handlePerson" class="inline-input" placeholder="请输入" />
      </el-form-item>
      <el-form-item>
        <el-button :icon="Search" type="primary" @click="search">搜索</el-button>
        <el-button :icon="Refresh" type="warning" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <main>
      <div ref="container" class="table">
        <el-table
          :data="changeList"
          style="width: 100%"
          border
          :height="tableHeight"
          ref="multipleTableRef"
        >
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column label="当前处理人" prop="handlePerson"> </el-table-column>
          <el-table-column label="归属处室" prop="orgName"> </el-table-column>
          <el-table-column label="超8小时">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row, '1')" link type="primary">
                {{ scope.row.count8To16Hours }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="超16小时">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row, '2')" link type="primary">
                {{ scope.row.count16To24Hours }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="超24小时">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row, '3')" link type="primary">
                {{ scope.row.countAbove24Hours }}
              </el-button>
            </template></el-table-column
          >
          <el-table-column label="总数">
            <template #default="scope">
              <el-button size="small" @click="handleEdit(scope.row, '4')" link type="primary">
                {{ scope.row.allCount }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination
        ref="pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </main>
    <footer class="dialog-footer">
      <el-button @click="Cancel" class="cancel_btn">关闭</el-button>
    </footer>
  </div>
</template>
<script setup lang="ts">
  import { Search, Refresh } from '@element-plus/icons-vue';
  import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
  import { eventSolveTaskListAll } from '@/http/api1';
  import { useRoute, useRouter } from 'vue-router';
  // import { useStore } from 'vuex';
  // const store = useStore();
  const props = defineProps({
    //是否为预览模式
    type: {
      type: String,
      default: ''
    }
  });
  const router = useRouter();
  const route = useRoute();
  const emits = defineEmits(['handleClose']);
  const pageNum = ref(1);
  const pageSize = ref(5);
  const total = ref(0);
  const tableHeight = ref(0);
  const container = ref(null);
  const changeList = reactive([]);
  const handlePerson = ref(''); // 处理人
  const orgName = ref(route.params.orgName ? route.params.orgName : ''); // 处室
  // const eventLevel = ref(route.params.eventLevel ? route.params.eventLevel : ''); // 等级
  onMounted(() => {
    enterKeyup();
    nextTick(() => {
      calHeight();
    });
    eventStock_TaskList();
  });
  const calHeight = () => {
    const rect = container.value.getBoundingClientRect();
    tableHeight.value = rect.height;
  };
  const handleEdit = (row: User, timeType: string) => {
    router.push({
      name: 'run_monitor',
      params: {
        type: '8',
        orgName: row.orgName?row.orgName:-1,
        typeCount: props.type?props.type:-1,
        eventLevel:-1,
        handlePerson: row.handlePerson?row.handlePerson:-1,
        handlePersonId: row.handlePersonId?row.handlePersonId:-1,
        overTime: timeType?timeType:-1
      }
    });
  };
  const Cancel = () => {
    emits('handleClose');
  };
  const eventStock_TaskList = () => {
    eventSolveTaskListAll({
      eventLevel: '',
      handlePerson: handlePerson.value,
      orgName: orgName.value,
      pageNum: pageNum.value,
      pageSize: pageSize.value,
      typeCount: props.type
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      changeList.length = 0;
      total.value = res.data.data.total;
      changeList.push(...res.data.data.rows);
      nextTick(() => {
        calHeight();
      });
    });
  };
  // 分页
  const handleSizeChange = (size) => {
    pageSize.value = size;
    // eventStock_TaskList();
  };
  const handleCurrentChange = (num) => {
    pageNum.value = num;
    eventStock_TaskList();
  };
  const reset = () => {
    orgName.value = '';
    handlePerson.value = '';
  };
  const search = () => {
    orgName.value = orgName.value.replace(/(^\s*)|(\s*$)/g, '');
    handlePerson.value = handlePerson.value.replace(/(^\s*)|(\s*$)/g, '');
    eventStock_TaskList();
  };
  const monitor = () => {
    document.onkeydown = (e) => {
      if (e.keyCode == 13) {
        search();
      }
    };
  };
  const enterKeyupDestroyed = () => {
    document.removeEventListener('keyup', monitor());
  };
  const enterKeyup = () => {
    document.addEventListener('keyup', monitor());
  };
  onBeforeUnmount(() => {
    enterKeyupDestroyed();
  });
</script>
<style lang="less" scoped>
  .demo-form-inline {
    height: 50px;
  }
  main {
    .table {
      height: 360px;
      // :deep(.el-table) {
      //   height: 100%;
      // }
    }
    // .el-table {
    // }
    :deep(.el-table thead) {
      height: 60px;
    }
    :deep(.el-table tr) {
      height: 60px;
    }
    .el-pagination {
      padding-top: 30px;
    }
  }
  .dialog-footer {
    // margin-right: 10px;
    height: 60px;
    padding-top: 25px;
    box-sizing: border-box;
    .cancel_btn {
      float: right;
    }
  }
</style>
